/**
 * SPDX-FileCopyrightText: 2023-2025 Sangfor Technologies Inc.
 * SPDX-License-Identifier: Mulan PSL v2
 */
<template>
    <sf-form ref="form"
             class="label-form"
             :label-width="100">
        <sf-form-item>
            <sf-fieldlabel>
                <lang>数据源名称</lang>
            </sf-fieldlabel>
            <sf-textfield
                ref="fieldName"
                v-model="submitData.name"
                :default-width="defaultWidth"
                :max-length="30"
                :allow-blank="false"
                :utf8-length="false"
                vtype="column_name"
                :blur-trim="true"
                :placeholder="_('请输入数据源名称，不可重复，最多30字符')" />
        </sf-form-item>
        <sf-form-item v-if="!isEdit">
            <sf-fieldlabel>
                <lang>上传数据源</lang>
            </sf-fieldlabel>
            <sf-textfield
                ref="uploadTextField"
                v-model="submitData.file"
                :default-width="250"
                placeholder="请选择csv文件"
                :allow-blank="false"
                :default-disabled="true" />
            <sf-fileupload
                ref="fileUpload"
                class="sfv-btn-primary"
                :url="fileUrl"
                :auto-upload="false"
                :params="submitData"
                :accept="acceptFile"
                @uploadfile:success="uploadSuccess"
                @uploadfile:failure="uploadFailure"
                @change="_selectFile">
                <lang>选择</lang>
            </sf-fileupload>
        </sf-form-item>
        <div class="uploadFile__tips">
            <lang>支持扩展名：.csv</lang>
        </div>
        <sf-form-item>
            <sf-fieldlabel>
                <lang>描述</lang>
            </sf-fieldlabel>
            <sf-textarea
                v-model="submitData.description"
                :placeholder="_('最多300字（选填）')"
                :default-width="defaultWidth"
                :max-length="300"
                :utf8-length="false" />
        </sf-form-item>
    </sf-form>
</template>
<script lang="ts">
const DEFAULT_WIDTH = 336;
const DEFAULT_VALUE = {
    file: '',
    name: '',
    description:'',
    'type':'csv'
};

const MAX_SIZE = 2147483648; // 2GB

const ACEEPT_TYPE = ['.csv'];

interface FormData{
    file: string;
    name: string;
    description: string;
    'type': string;
}

import { Component, Vue } from 'vue-property-decorator';
import store from 'src/vuex/store';
let userID = store.state.userId;


@Component
export default class AddDataSource extends Vue {

        get defaultWidth () {
            return DEFAULT_WIDTH;
        }
        get uploadParams () {
            return {
                id: ''
            };
        }
        get acceptFile () {
            return ACEEPT_TYPE.join(',');
        }
        get acceptFileText () {
            return _('支持扩展名：{0}', ACEEPT_TYPE.join(' '));
        }
        get fileUrl () {
            return `web/v1/user/${userID}/dataSource/file`;
        }

        isEdit =false
        submitData =  { ...DEFAULT_VALUE }

        // 上传相关
        _selectFile (files: File[]) {
            let file = files[0];
            if (!/.csv$/.test(file.name)) {
                this.$showErr(_('只支持上传{0}文件', this.acceptFile));
                return false;
            }
            if (file.size > MAX_SIZE) {
                this.$showErr(_('上传文件的体积应小于2GB'));
                return false;
            }
            this.submitData.file = file.name;
        }
        /* eslint-disable */
        // @ts-ignore
        uploadSuccess (vm:SafeAny, result:SafeAny, file:SafeAny, jsonData:SafeAny) {
            this.$parent.options.uploadSuccessCallback(jsonData);
        }

        // @ts-ignore
        uploadFailure (vm:SafeAny, result:SafeAny, file:SafeAny, jsonData:SafeAny) {
            // @ts-ignore
            this.$refs.fileUpload.progressWindow && this.$refs.fileUpload.progressWindow.hide(); // 隐藏进度条
            this.$parent.options.uploadFailureCallback(jsonData);
        }
        beginUpload () {
            let uploader = this.$refs.fileUpload;
            if (uploader) {
                // @ts-ignore
                uploader.uploadFile();
            }
        }

        getJsonValue () {
            return this.submitData;
        }
        setJsonValue (data: FormData) {
            Object.assign(this.submitData, data);
        }
  };
  </script>
  <style lang="less" scoped>
  .label-form {
    .model-tips {
      background-color: #fdf3e4;
      color: #e0720b;
      padding: 10px;
      margin-bottom: 10px;
      text-align: center;
    }
    .label-form__tabel {
      border: none;
    }
    .uploadFile {
      display: flex;
      align-items: center;
      .sfv-btn-primary {
        margin-left: 8px;
      }
    }
    .uploadFile__tips {
      padding-left: 105px;
      margin-top: -8px;
      margin-bottom: 12px;
      color: #a3a3a3;
      .upload-download{
          color: #204ed9;
          margin-left: 108px;
      }
    }
  }
  </style>
